<template>
<ul>
  <li v-for="item in menuList " :key="item.imgColor">
    <div :style="{backgroundColor:item.imgColor}">
        <img :src="picture(item.imgSrc)"item.imgSrc alt="" :style="{width:item.imgW,height:item.imgH}">
    </div>
      <p>{{item.titles}}</p>
  </li>
</ul>
</template>
<script>

// import fliocn from '@/assets/images/img/flicon.png' 引入图片

export default {
  data(){
    return{
      menuList:[
        {titles:'单位福利',imgSrc:'flicon',imgColor:'#ff6237',imgW:'0.57rem',imgH:'0.46rem'},
        {titles:'免费领取',imgSrc:'mflqicon',imgColor:'#3bda7b',imgW:' 0.54rem',imgH:'0.57rem'},
        {titles:'活动',imgSrc:'flicon',imgColor:'#ffcb00',imgW:'0.58rem',imgH:'0.58rem'},
        {titles:'京东优选',imgSrc:'jdicon',imgColor:'#7c7cfb',imgW:'0.58rem',imgH:'0.43rem'},
      ]
    }
  },
  methods:{
    picture(picName){
       return require('@/assets/images/img/'+picName+'.png')
    }
  }

};
</script>
<style lang="less" scoped>
ul {
  margin-top: 0.2rem;
  width: 7.5rem;
  height: 1.87rem;
  box-sizing: border-box;
  padding-top: 0.2rem;
  padding-left: 0.5rem;
  background:#ffffff;
  li {
    position: relative;
    list-style: none;
    float: left;
    margin-right: 0.83rem;
    &:last-child{
      margin-right: 0;
    }
    div{
      width: 1rem;
      height: 1rem;
      border-radius: 100%;
      position: relative;
      margin-bottom: .1rem;
      img{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%)
      }
    } 
    p {
      font-size: .26rem;
      line-height: .37rem;
      color:#232323;
      text-align: center;
      margin-bottom: .2rem;
    }
  }
}
</style>


